<template>
	<view class="chat-list-page">
		<view class="chat-items">
			<view class="item" v-for="(item,index) in personList" :key="index" :data-id="item.uid" :data-image="item.image" @click="onLine">
				<view class="item-lf">
					<view class="header" v-if="item.image!=null"><image :src="item.image" mode=""></image></view>
					<view class="header" v-else><image src="../static/images/icon_header.png" mode=""></image></view>
					<view class="content">
						<view class="name">{{item.nikeName}}</view>
						<view class="chat-contet">{{item.lastMsg}}</view>
					</view>
				</view>
				<view class="item-rg">
					<view class="time">{{item.lastDate}}</view>
					<view class="un-read" v-if="item.wdxx>0">{{item.wdxx}}</view>
				</view>
			</view>
			<!-- 暂无数据 -->
            <view v-if="personList.length==0">
				<noData/>
			</view>
		</view>
	</view>
</template>

<script>
import Vue from "vue"
import InterServer from "@/common/config/server";
import { localStorageSyncServer} from "@/common/js/common"
import noData from '@/components/noData/noData';
export default {
	components:{
		noData
	},
	data(){
		return{
          personList:[]
		}
	},
	onShow(){
	// #ifdef H5
		document.title=`顾问列表`
	// #endif
	this.getOnLineUsers() //获取顾问列表
	},
    methods:{
		getOnLineUsers(){
			InterServer.onLineUsers({
              cid:localStorageSyncServer.get("userInfo").cid
			}).then(res=>{
               console.log(res)
			   if(res.code==200){
				   this.personList=res.data
			   }
			})
		},
		//页面跳转
		onLine(e) {
			const id = e.currentTarget.dataset.id;
			const image = e.currentTarget.dataset.image;
			localStorageSyncServer.set("herderRobotImg",image)
			Vue.customNavigateTo(`./chat?id=${id}`);
		}	
	}
}
</script>

<style lang="less" scoped>
page{
	height: 100%;
}
.chat-list-page {
	height: 100%;
	.chat-items {
		height: 100%;
		.item {
			padding: 20upx 30upx;
			border-bottom: 1upx solid #f3f3f3;
			display: flex;
			justify-content: space-between;
			&-lf {
				display: flex;
				.header {
					width: 100upx;
					height: 100upx;
					margin-right: 15upx;
				}
				image {
					border-radius: 50%;
					width: 100upx;
					height: 100upx;
				}
				.name {
					color: #333333;
					font-size: 32upx;
					line-height: 32upx;
					margin: 10upx 0 25upx;
				}
				.chat-contet {
					font-size: 28upx;
					line-height: 28upx;
					color: #999999;
					width: 300upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			&-rg {
				.time {
					font-size: 24upx;
					color: #a9a9a9;
					line-height: 24upx;
					margin: 25upx 0 20upx;
				}
				.un-read {
					width: 35upx;
					height: 35upx;
					text-align: center;
					line-height: 35upx;
					background: #f76260;
					font-size: 24upx;
					border-radius: 50%;
					color: #ffffff;
					float: right;
				}
			}
		}
	}
}
</style>
